<template>
    <div class="header">
        <span>部门列表</span>
        <div class="right">
            <el-button :icon="Search" @click="loadAllDept" size="small" type="text" style="color: white">展示所有</el-button>
        </div>
    </div>
    <el-table ref="deptTable" :data="deptData" border size="small" stripe>
        <!--        @selection-change="saveSelection"  v-loading="loading.value"-->
        <el-table-column prop="id" label="部门编号" align="center" width="80"/>
        <el-table-column prop="deptName" label="部门名称"/>
        <el-table-column prop="address" label="所在地址"/>
        <el-table-column prop="companyName" label="公司名称"/>
        <el-table-column prop="principalName" label="部门负责人" width="80"/>
<!--        <el-table-column prop="companyId" label="公司编号"/>-->
        <el-table-column label="是否可用" width="130">
            <template #default="s">
                <el-switch active-text="启用"
                           inactive-text="禁用"
                           :active-value="1"
                           :inactive-value="0"
                           size="small"
                           :before-change="switchEnabled"
                           @change="enableChange($event,s.row)"
                           v-model="s.row.enabled"
                />
            </template>
        </el-table-column>
        <el-table-column prop="createTime" label="创建时间"/>
        <!--                <el-table-column prop="updateTime" label="更新时间"/>-->
        <el-table-column label="操作" width="140">
            <template #default="s">
                <el-button type="text" size="small" :icon="Edit" @click="editDept(s.row)">编辑</el-button>
                <el-button type="text" size="small" :icon="Delete" @click="deleteOne(s.row)">删除</el-button>
            </template>
        </el-table-column>
    </el-table>
    <div class="footer">
        <el-button type="default" size="small" :icon="Plus" @click="addDept">添加部门</el-button>
    </div>
    <dept-form width="48%"  ref="deptForm" @refresh-data="refreshData"/>
</template>

<script>
    import {Plus,Delete,Edit,Search} from '@element-plus/icons-vue'
    import DeptForm from "./form/DeptForm.vue";
    import {deleteDept, getDeptList, updateDept} from "../../../network/sys/dept";

    export default {
        name: "DeptTreeTab",
        components: {DeptForm},
        emits:['refresh-data'],
        setup(){
            return{
                Delete,
                Edit,
                Plus,
                Search
            }
        },
        data(){
            return {
                companyId: null,
                deptData: null,
                level: null
            }
        },
        methods:{
            refreshData(){
                this.loadDeptList();
                this.$emit('refresh-data')
            },
            loadAllDept(){
                this.companyId = null;
                this.loadDeptList();
            },
            deleteOne(row){
                this.$operate.remove({
                        title: '删除部门',
                        data: `' ${row.deptName} '`,
                        executeFn: ()=>{
                            deleteDept([row.id]).then(data=>{
                                this.$response.handle({
                                    data: data,
                                    success: '删除成功',
                                    error: '删除失败',
                                    successFn:()=>{
                                        this.loadDeptList();
                                        this.$emit('refresh-data')
                                    }
                                })
                            })
                        }
                })
            },
            //修改状态
            switchEnabled(){
                return this.$operate.switchStatus({
                    title: '修改部门状态',
                    hint: '你确认要更改该部门的状态吗'
                });
            },
            //修改状态执行
            enableChange($event,row){
                console.log('val',$event);
                console.log('id',row.id);
                updateDept({id:row.id,enabled:$event}).then(data=>{
                    this.$response.handle({
                        data:data,
                        success: '修改成功',
                        error: '修改失败'
                    })
                })
            },
            addDept(){
                let frm = this.$refs.deptForm;
                frm.visible = true;
                frm.title = '添加部门';
                frm.type = 0;
                this.$nextTick(function (){
                    frm.setDept({companyId: this.companyId,enabled: 1})
                })
            },
            editDept(row){
                // console.log('row',row)
                let frm = this.$refs.deptForm;
                frm.visible = true;
                frm.title = '修改部门'
                frm.type = 1;
                this.$nextTick(function (){
                    frm.setDept(row);
                })
            },
            loadDeptList(){
                getDeptList(this.companyId).then(vo=>{
                    this.$response.handle({
                        data: vo,
                        successFn: ()=>{
                            this.deptData = vo.data;
                        },
                        log: '初始化所有部门数据：'
                    })
                })
            },
            init(){
                this.loadDeptList();
            }
        },
        watch:{
            companyId: function (newVal,oldVal){
                // console.log('newVal',newVal)
                // console.log('oldVal',oldVal)
                this.loadDeptList();
            }
        },
        created() {
            this.init();
        }
    }
</script>

<style scoped>
    .header{
        padding: 0 10px;
        background: rgb(140,183,225);
        font-size: 14px;
        color: white;
        overflow: hidden;
    }
    .footer{
        padding: 0 10px;
        float: right;
    }
    .right{
        float: right;
    }
</style>
